<template>
    <div class="w-100 h-100">
      <containTemplete
        :title="''"
        :secondTitles="['告警数量', '本月告警趋势']"
        :slot-width="[50, 50]"
      >
        <template #left>
          <div class="w-100 h-100">
              <gjsl />
          </div>
        </template>
        <template #middle>
          <div class="w-100 h-100">
              <bygjqx :year="middle_year_value"/>
          </div>
        </template>

        <template #middle_control>
            <proSelect
                :optionsData="useOptions().year()"
                :defaultSelectValue="new Date().getFullYear()-1"
                v-model:select-value="middle_year_value"
                :width="100"
              >
              </proSelect>
        </template>
      </containTemplete>
    </div>
  </template>
  
  <script setup lang="ts">
  import containTemplete from "@/components/project/containTemplete.vue";
  import { useOptions } from "@/hook/useOptions";
  import gjsl from './gjsl.vue';
  import bygjqx from './bygjqx.vue'

  const middle_year_value = ref(2024)
  </script>
  
  <style scoped lang="less"></style>
  